<template>
    <client-layout :current="0">
        <div class="form-wrapper">
            <h1>创建第三方应用</h1>
            <p style="margin-bottom: 40px;">应用信息将在对商家进行授权时展示，请认真填写</p>
            <!-- 表单 -->
            <a-form :form="form" @submit="onFormSubmit">
                <a-form-item label="应用名称" :label-col="{ span : 4 }" :wrapper-col="{ span : 18 }">
                    <a-input placeholder="请输入" autocomplete="off"
                             v-decorator="[
                                'appName',
                                {
                                    rules: [
                                        { required: true, message: '请输入应用名称' },
                                        { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,20}$/, message: '由2~20个字母、数字、中文和下划线组成' },
                                    ]
                                 }
                             ]"
                    />
                </a-form-item>
                <a-form-item label="应用图标" :label-col="{ span : 4 }" :wrapper-col="{ span : 18 }">
                    <a-input placeholder="请输入" autocomplete="off"
                             v-decorator="[
                                'appLogo',
                                {
                                    rules: [
                                        { required: true, message: '请输入应用图标地址' },
                                        { pattern: /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, message: '请输入正确的地址' }
                                    ]
                                }
                             ]"
                    />
                </a-form-item>
                <a-form-item label="授权回调域" :label-col="{ span : 4 }" :wrapper-col="{ span : 18 }">
                    <a-input placeholder="请输入" autocomplete="off"
                             v-decorator="[
                                'callback',
                                {
                                    rules: [
                                        { required: true, message: '请输入授权回调域地址' },
                                        { pattern: /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, message: '请输入正确的地址' }
                                    ]
                                }
                             ]"
                    />
                </a-form-item>
                <a-form-item label="应用描述" :label-col="{ span : 4 }" :wrapper-col="{ span : 18 }">
                    <a-textarea placeholder="请输入" autocomplete="off" v-decorator="[ 'appDesc' ]" ></a-textarea>
                </a-form-item>
                <a-form-item :wrapper-col="{ offset: 4, span : 18 }">
                    <a-button type="primary" html-type="submit" block>提交</a-button>
                </a-form-item>
            </a-form>
        </div>
    </client-layout>
</template>

<script>
    import ClientLayout from '../../components/layouts/ClientLayout';
    import { addOauthClient } from '../../apis/index';
    export default {
        components : { ClientLayout },
        data(){
            return {
                form : this.$form.createForm(this),
            };
        },
        methods : {
            onFormSubmit : function(e) {
                e.preventDefault();
                let $this = this;
                $this.form.validateFields((err, params) => {
                    if (!err){
                        params['appDesc'] = params['appDesc'] ? params['appDesc'] : '暂无描述';
                        addOauthClient(params).then(() => {
                            $this.$message.success("保存成功");
                            this.$router.push({ name : 'console' }).then();
                        });
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .form-wrapper{
        color: rgba(0, 0, 0, 0.45);
    }
    .form-wrapper h1,
    .form-wrapper p{
        text-align: center;
    }
</style>
